"use client"

import { MapPin, Phone, Mail } from "lucide-react"
import { useLanguage } from "@/context/language-context"

export function ContactSection() {
  const { dictionary } = useLanguage()

  return (
    <section className="py-12 md:py-20 bg-gray-50 dark:bg-gray-900">
      <div className="container mx-auto px-4 md:px-6 text-center">
        <h2 className="text-3xl md:text-4xl font-bold mb-6 text-gray-900 dark:text-gray-50">
          {dictionary.contactUsTitle}
        </h2>
        <p className="text-lg text-gray-700 dark:text-gray-300 mb-10 max-w-2xl mx-auto">
          {dictionary.contactUsDescription}
        </p>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
          <div className="flex flex-col items-center space-y-3 p-6 bg-white dark:bg-gray-800 rounded-lg shadow-md">
            <MapPin className="w-8 h-8 text-gray-700 dark:text-gray-300" />
            <h3 className="text-xl font-semibold text-gray-900 dark:text-gray-50">Address</h3>
            <p className="text-gray-600 dark:text-gray-400">{dictionary.address}</p>
          </div>
          <div className="flex flex-col items-center space-y-3 p-6 bg-white dark:bg-gray-800 rounded-lg shadow-md">
            <Phone className="w-8 h-8 text-gray-700 dark:text-gray-300" />
            <h3 className="text-xl font-semibold text-gray-900 dark:text-gray-50">Phone</h3>
            <p className="text-gray-600 dark:text-gray-400">{dictionary.phone}</p>
          </div>
          <div className="flex flex-col items-center space-y-3 p-6 bg-white dark:bg-gray-800 rounded-lg shadow-md">
            <Mail className="w-8 h-8 text-gray-700 dark:text-gray-300" />
            <h3 className="text-xl font-semibold text-gray-900 dark:text-gray-50">Email</h3>
            <p className="text-gray-600 dark:text-gray-400">{dictionary.email}</p>
          </div>
        </div>
      </div>
    </section>
  )
}
